<template>
    <div class="person">
        性:<input type="text" v-model="firstName" id=""> <br>
        名:<input type="text" v-model="lastName" id=""> <br>
        全名: <span>{{ fullName }}</span> <br>
        <button @click="changeFullName">全名改为:li-si</button>
    </div>
</template>
<script lang="ts" setup name='Person'>
import { ref, computed} from 'vue';
    let firstName = ref("zhang")
    let lastName = ref("san")

    /* 
        如果我们需要首字母大写的情况,那我们slice方法筛选出我们需要的字母,再利用其toUpperCase方法,对其字母进行大小写转换>
        // computer 直接进行返回的话,我们的数据将会是只读属性.如果我们要让其
        读取又修改
    */
    let fullName = computed({
    // 读取
        get(){
            return (firstName.value.slice(0, 1)).toUpperCase() + firstName.value.slice(1) +"-"+ lastName.value;
        },
        // 修改 set 中的参数会返回原本的变量中的值
    /* 
        我们要实现我们的修改全名的方法
        因为我们的全名值是进过firstName和lastName的值计算而出的,所以我们,我们单单对FullName的值进行修改的不会有变化.
        我们点击其方法让其把我们从后端拿到的新的完整的值进行修改.给val传值,这个我们拿到了新的值
        再进行重赋值,让其重新进行计算......
    */
    set(val){
        console.log("修改了fullName");
        firstName.value = val.split("-")[0]
        lastName.value = val.split("-")[1]
    }
})
function changeFullName() {
        fullName.value = "li-si"
}


    /* 
        还是有不理解的地方,这个语法确实很奇怪,如果我们拿到的是直接的姓+名,为什么我们不直接进行修改姓和名,也能让其进行重新运算呢?
    */
</script>
<style scoped>
/*  组件的样式 */
    .person{
            /* 设置颜色,设置阴影,
            设置元素的外边框圆角,使用一个半径可以确定一个圆形,当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。
            设置内边距
            */
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px;
    }


</style>
